import React,{Component} from 'react';

import { visualSystemTable, copyShip, deleteShip } from '../../../api/server';

import { Layout,  Button , Table } from 'antd';

import "./index.less";

import { SearchOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;
// 复制弹框
class VisualSystem extends Component{    
    constructor(props){
        super(props);
        this.state = {
            columns : [
                { title: '序号', dataIndex: 'sheep_guid', key: 'sheep_guid',align: 'center' },
                { title: '船体名称', dataIndex: 'sheep_name', key: 'sheep_name',align: 'center'},
                { title: '船模', dataIndex: 'sheep_model',align: 'center', key: 'sheep_model', 
                    render: e => 
                    e === '' ? <span> <img src={require("./img/noupdate.jpg")} alt=""/> 未上传</span>  : <span> <img src={require("./img/update.jpg")} alt=""/> 也上传</span>                     
                },
                { title: 'GPS', dataIndex: 'sheep_Gps_num', key: 'sheep_Gps_num',align: 'center'},
                { title: '绞车', dataIndex: 'winch', key: 'winch' ,align: 'center'},
                { title: '吊架', dataIndex: 'hanger', key: 'hanger',align: 'center' },
                { title: '泥门', dataIndex: 'sheep_BottomDoor_num', key: 'sheep_BottomDoor_num',align: 'center' },
                { title: '艏喷', dataIndex: 'sheep_Rainbow_num', key: 'sheep_Rainbow_num',align: 'center' },
                { title: '艏吹', dataIndex: 'sheep_ShoreDischarge_num', key: 'sheep_ShoreDischarge_num',align: 'center' },
                { title: '顶喷', dataIndex: 'sheep_Loading_num', key: 'sheep_Loading_num',align: 'center' },
                { title: '冲仓口', dataIndex: 'sheep_FlushHopper_num', key: 'sheep_FlushHopper_num',align: 'center' },
                { title: '操作', dataIndex: 'action',align: 'center', key: 'action',
                    render: (name, record) => 
                    <div>
                        <span className="action" onClick={() => this.copy(record)}>复制</span>
                        <span className="action">{record.name}编辑</span>
                        <span className="action" onClick={() => this.delete(record)}>删除</span>
                    </div>
                    }
                ],
            tableData:[],
            count: 11,
            page:1,
            isDispaly:0,
            copyData:null,
            inpVal:'',
            tempTableData:null
        }
    }    
    render(){
        return(
            <div id="VisualSystem">
                <Layout>
                    <Header>
                        <div className="ship_list_left">
                            <img src={require("./img/list.jpg")}  alt=""/>
                            <span className="ship_list">船体列表</span>
                            <div className="ship_list_con">
                                
                                <input className="ship_list_search" ref="searchTableList" prefix={<SearchOutlined />} onKeyUp={ (e) => this.searchTableList(e) }/>
                                <img src={require("./img/cancel.jpg")} alt="" className="cancel" onClick={ (e) => this.clearSearch(e) } />
                                <img src={require("./img/search.jpg")} alt="" className="search"/>
                            </div>
                        </div>
                        <div className="ship_list_right">
                            <Button  type="primary" onClick={ (e) => this.createShip(e) }>新建船体</Button >
                        </div>
                    </Header>

                    <Content>
                        <Table 
                            columns={this.state.columns} 
                            dataSource={this.state.tableData} 
                            pagination={{ pageSize: 8,position: ['bottomCenter'],showQuickJumper:true,itemRender:this.itemRender}}                            
                        />
                    </Content>
                </Layout>
                <div className="copyValidate" style={{ display: this.state.isDispaly === 0 ? 'none' : 'block' }} >
                    <div className="copyValidateCon">
                        <input type="text" className="copyValidateInp" ref="copyValidateInp" onKeyUp={(e)=>this.inputChagne(e)} />
                        <div>
                            <Button type="default" onClick={ () =>{ this.cancel() }}>取消</Button>
                            <Button type="primary" onClick={ () =>{ this.confirm() }} >确定</Button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        this.tableLoad();         
    }
    createShip(){
        let _this = this.props._this;
        _this.props.history.push("/CreateShip");
    }
    // 加载船体列表
    tableLoad(){
        let data = [];   
        let _this = this;
        visualSystemTable({method: 'sheeplist'}).then(function (res) {
            console.log(res.data)
            for (let i = 0; i < res.data.length; i++) {
                data.push({
                    key: res.data[i].sheep_guid,
                    sheep_guid: i+1,
                    sheep_name: res.data[i].sheep_name,
                    sheep_model: res.data[i].sheep_model_file_url,
                    sheep_Gps_num: res.data[i].sheep_Gps_num,
                    winch:res.data[i].sheep_Drag_num*2,
                    hanger:res.data[i].sheep_Drag_num,
                    sheep_BottomDoor_num:res.data[i].sheep_BottomDoor_num,
                    sheep_Rainbow_num:res.data[i].sheep_Rainbow_num,
                    sheep_ShoreDischarge_num :res.data[i].sheep_ShoreDischarge_num,
                    sheep_Loading_num :res.data[i].sheep_Loading_num,
                    sheep_FlushHopper_num :res.data[i].sheep_FlushHopper_num,
                    action:'action'
                })    
            }
            _this.setState({
                tableData:data,
                tempTableData :data
            })
            // 添加dom元素。共xx页  xx页
            let preBtn = document.getElementsByClassName("ant-pagination-prev")[0];
            let btmUl = document.getElementsByClassName("ant-pagination")[0];
            var listNum = document.createElement("p");
            listNum.innerHTML = `共${res.data.length}条&nbsp;&nbsp;&nbsp;${Math.ceil((res.data.length)/8)}页`;
            listNum.className = 'listNum';
            btmUl.insertBefore(listNum,preBtn);
        })
    }
    itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <span style={{'padding':'4px',backgroundColor:'#c9d7e3'}}>上一页</span>;
        }
        if (type === 'next') {
          return <span style={{'padding':'4px',backgroundColor:'#c9d7e3'}}>下一页</span>;
        }
        return originalElement;
      }
    
      searchTableList(e){
          let tableList = []
        let _this = this
        let searchList = this.state.tempTableData;
        if(e.target.value !=="") {
            for (let i = 0; i < searchList.length; i++) {
                console.log(searchList[i].sheep_name.indexOf(e.target.value))
                if (searchList[i].sheep_name.indexOf(e.target.value) > -1) {
                    tableList.push(searchList[i]);
                    _this.setState({
                        tableData:[...tableList]
                    })                    
                }
            }
        }else if(e.target.value ==="") {
            _this.tableLoad();    
        }   
    }
    // 复制船体
    copy(copyData){
        this.setState({
            isDispaly:1,
            copyData:copyData
        })
    }
    // 取消
    cancel(){
        this.setState({
            isDispaly:0
        })
    }
    inputChagne(e){
        this.setState({
            sheep_name:e.target.value
        })
    }
    clearSearch(){
        console.log(this.refs.searchTableList)
        this.refs.searchTableList.value=""
    }
    // 确定
    confirm(){
        let sheep_name = this.refs.copyValidateInp.value;
        this.setState({
            isDispaly:0
        }) 
        let copyData = this.state.copyData
        let _this = this;
        const {tableData} = this.state
        copyShip({
            method: 'sheepcopy',
            sheep_guid:copyData.key,
            sheep_name:sheep_name
        }).then((response)=>{
            _this.tableLoad();        
            tableData.push({
                key: copyData.key+1,
                sheep_guid: _this.state.tableData.length+1,
                sheep_name: copyData.sheep_name,
                sheep_model: copyData.sheep_model,
                sheep_Gps_num: copyData.sheep_Gps_num,
                winch:copyData.sheep_Drag_num*2,
                hanger:copyData.sheep_Drag_num,
                sheep_BottomDoor_num:copyData.sheep_BottomDoor_num,
                sheep_Rainbow_num:copyData.sheep_Rainbow_num,
                sheep_ShoreDischarge_num :copyData.sheep_ShoreDischarge_num,
                sheep_Loading_num :copyData.sheep_Loading_num,
                sheep_FlushHopper_num :copyData.sheep_FlushHopper_num,
                action:'action'
            })
            _this.setState({
                tableData:[...tableData],
                isDispaly:0
            })
        }).catch((err)=>{
            console.log(err)
            alert("服务器出错")
        })
    }
    // 删除船体
    delete(copyData){
        let _this = this;
        const {tableData} = this.state;
        deleteShip({
            method: 'sheepdelete',
            sheep_guid:copyData.key
        }).then((res)=>{
            _this.tableLoad();  
            for (let i = 0; i < tableData.length; i++) {
                if(tableData[i].sheep_guid === copyData.sheep_guid){
                    tableData.splice(i, 1);
                }                
            }
            _this.setState({
                tableData:[...tableData]
            }) 
        }).catch((err)=>{
            alert("服务器出错")
        })
    }
}
export default VisualSystem;